<template>
  <el-table
      v-loading="loading"
      :data="tableData"
      border
  >
    <el-table-column
        prop="goodsImage"
        :label="$t('table.productCover')"
        align="center"
        width="110"
    >
      <template slot-scope="{row}">
        <div class="img-box img-one">
          <img :src="row.image" alt="">
        </div>
      </template>
    </el-table-column>
    <el-table-column
        prop="goodsTitle"
        :label="$t('table.title')"
        align="left"
        width="500"
        show-overflow-tooltip
    >
      <template slot-scope="{row}">

        <div class="title hidden-1">
          {{ row.title }}
        </div>
        <p class="goods-attr">
              <span
                  v-for="attr in row.attributes"
                  :key="attr.name"
                  class="attr"
                  style="color: #7F7F7F;"
              >
                {{attr.name}} : {{attr.value}}
                <span class="attr-link"> | </span>
              </span>
        </p>
      </template>
    </el-table-column>
    <el-table-column
        prop="sku"
        label="SKU"
        align="left"
        min-width="200"
    >
      <template slot-scope="{row}">
        <div
            v-for="goods in row.goodsList"
            :key="goods.id"
        >
          {{goods.sku}}
        </div>
      </template>
    </el-table-column>
    <el-table-column
        prop="weight"
        :label="$t('table.重量与尺寸')"
        width="150"
        align="left"
    >
      <template v-slot="{row}">
        <goods-size
            v-for="item in row.goodsList"
            :key="item.id"
            :goods-list="row.goodsList"
            :goods-row="item"
            :hide-edit-button="true"
        ></goods-size>
      </template>
    </el-table-column>

    <el-table-column
        :label="$t('table.Packaging Services')"
        align="left"
        min-width="220">
      <template slot="header" slot-scope="{}">
        <span>{{$t('table.Packaging Services')}}</span>
        <el-tooltip class="item" effect="dark" placement="top">
          <template #content>{{$t('table.Packaging Tis One')}}<br/>{{$t('table.Packaging Tis Two')}}<br/>{{$t('table.Packaging Tis Three')}}</template>
          <i class="el-icon-question" style="color:#409eff; margin-left:5px;"></i>
        </el-tooltip>
      </template>
      <template slot-scope="{row}">
        <el-select v-model="row.packageMaterialId" @change="savePackageMaterialId(row)">
          <el-option :label="$t('table.No packaging service')" :value='0'></el-option>
          <el-option
              v-for="(item, index) in packageMaterial"
              :key="index"
              :label="item.name + '(' + item.price + $t('table.unit1') + ')'"
              :value="item.id">
          </el-option>
        </el-select>
      </template>
    </el-table-column>

    <el-table-column
        prop="totalStockNum"
        :label="$t('table.仓库总库存',{warehouseName: getWareHouseName()})"
        align="center"
        width="120"
    >
      <template slot="header">
        {{$t('table.仓库总库存',{warehouseName: getWareHouseName()})}}
        <el-tooltip class="item" effect="dark" placement="top">
          <template #content>{{$t('table.Inventory Tis One')}}<br/>{{$t('table.Inventory Tis Two')}}<br/>{{$t('table.Inventory Tis Three')}}<br/>{{$t('table.Inventory Tis Four')}}</template>
          <i class="el-icon-question" style="color:#409eff; margin-left:5px;"></i>
        </el-tooltip>
      </template>
    </el-table-column>
    <el-table-column
        prop="underWayNum"
        :label="$t('table.In-transit inventory')"
        align="center"
        width="100"
    >
    </el-table-column>
    <el-table-column
        prop="sales"
        :label="$t('table.sold')"
        align="left"
        width="100"
    >
    </el-table-column>
    <el-table-column
        prop="goodsNumInBox"
        :label="$t('table.goodsNumBox')"
        align="left"
        width="100"
    ></el-table-column>
    <el-table-column
        prop="op"
        :label="$t('table.operate')"
        align="left"
        min-width="150"
    >
      <template slot-scope="{row}">
        <el-button type="text" @click="gotoEditPacketGoods(row)">{{ $t('packet.编辑商品') }}</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import {getPlatformShortNameByAccountNum} from "@/utils";
import GoodsSize from "@/views/stock/components/GoodsSize.vue";
import {getWareHouseName} from "@/utils/common";

export default {
  props: {
    tableData: {
      type: Array,
      default() {
        return [];
      },
    },
    loading: {
      type: Boolean,
      default: false,
    },
    packageMaterial: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  components: {
    GoodsSize,
  },
  data() {
    return {

    }
  },
  created() {

  },
  methods: {
    getWareHouseName,
    getPlatformShortNameByAccountNum,
    savePackageMaterialId(row) {
      this.$emit('savePackageMaterialId', row)
    },
    gotoEditPacketGoods(row) {
      this.$router.push({
        name: 'updatePacketGoods',
        params: {
          goodsId: row.goodsId,
        },
      });
    },
  }
}
</script>

<style scoped lang="less">

</style>
